<template>
  <div
    class="login"
  >
    <div class="login_bg"></div>
    <div class="company">在线pk平台</div>
    <div
      class="login-right"
    >
      <div class="login-img">
        <img src="../../../assets/login_img.png" alt="">
      </div>
      <div class="form-div">
        <a-form-model
          class="demo-ruleForm"
          ref="loginForm"
          :model="loginForm"
          :rules="rules"
        >
          <!--            <h2 class="mb-8 text-3xl font-bold text-gray-900 text-center title">用户登录</h2>-->
          <h2 class="login-title">学习答题管理平台</h2>
          <div class="username">
            <label class="login-label">登录账号</label>
            <a-form-model-item ref="userCode" prop="userCode">
              <a-input
                class="login-input"
                placeholder="账号/工号/手机号"
                name="userCode"
                autoComplete="off"
                v-model="loginForm.userCode"
                :maxLength="20"
                @blur="
                  () => {
                    $refs.userCode.onFieldBlur();
                  }
                "
              />
            </a-form-model-item>
          </div>
          <div class="password">
            <label class="login-label">登录密码</label>
            <a-form-model-item ref="passwd" prop="passwd">
              <a-input
                class="login-input"
                placeholder="请输入登录密码"
                name="passwd"
                type="password"
                autocomplete="new-password"
                v-model="loginForm.passwd"
                :maxLength="50"
                @blur="
                  () => {
                    $refs.passwd.onFieldBlur();
                  }
                "
              />
            </a-form-model-item>
          </div>
          <div class="captcha">
            <label class="login-label">图形验证码</label>
            <div class="captcha-container">
              <a-form-model-item ref="captcha" prop="captcha" class="captcha-form-item">
                <a-input
                  class="captcha-input"
                  placeholder="请输入验证码"
                  name="captcha"
                  v-model="loginForm.captcha"
                  :maxLength="4"
                  @blur="
                    () => {
                      $refs.captcha.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <div class="captcha-image" @click="refreshCaptcha">
                <img v-if="captchaImage" :src="captchaImage" alt="验证码" />
                <div v-else class="captcha-placeholder">点击获取验证码</div>
              </div>
            </div>
          </div>

        </a-form-model>
        <div class="login-button">
          <button v-on:click="onSubmit" class="login-btn" :disabled="disabled">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logins, getCaptcha } from '../../../api/user';
import preventBack from 'vue-prevent-browser-back';

export default {
  name: 'Login',
  mixins: [preventBack],//注入
  data() {
    return {
      disabled: false,//保存按钮不可用
      loginForm: {
        userCode: '',
        passwd: '',
        captcha: '',
        // keyword: '',
        // keywords: '',
        name: 'loginForm',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      captchaImage: '', // 验证码图片base64数据
      captchaId: '', // 验证码Key
      rules: {
        userCode: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        passwd: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
      }
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  created: function () {

  },
  mounted: function () {
    this.createCode(); //获取验证码
    //绑定键盘事件
    window.addEventListener('keydown', this.keyDown);
  },
  methods: {
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.onSubmit();
      }
    },
    /**
     * 登录方法
     * 提交登录表单，包含验证码验证
     */
    login() {
      this.disabled = true;
      let data = '';
      // 添加验证码Key到登录数据中
       const loginData = {
         ...this.loginForm,
         captchaKey: this.captchaId
       };
      
      logins(loginData)
        .then(res => {
          this.loading = false;
          this.disabled = false;
          if (res.result == 'success') {
            localStorage.setItem('token', res.token);
            this.$router.push({ path: '/eventManagement' });
          } else {
            // 登录失败时刷新验证码
            this.refreshCaptcha();
            this.$message.error(res.message || '登录失败');
          }
        })
        .catch(err => {
          this.loading = false;
          this.disabled = false;
          // 登录出错时刷新验证码
          this.refreshCaptcha();
          console.error('登录错误:', err);
          this.$message.error('登录失败，请重试');
        });
    },
    /**
      * 获取图形验证码
      * 调用后端接口获取验证码图片和Key
      */
     createCode() {
       getCaptcha({})
         .then(res => {
           if (res.result === 'success') {
             this.captchaImage = res.captchaImage;
             this.captchaId = res.captchaKey;
           } else {
             this.$message.error('获取验证码失败');
           }
         })
         .catch(err => {
           console.error('获取验证码错误:', err);
           this.$message.error('获取验证码失败');
         });
     },
    /**
     * 刷新验证码
     * 点击验证码图片时重新获取验证码
     */
    refreshCaptcha() {
      this.loginForm.captcha = ''; // 清空输入的验证码
      this.createCode();
    },
    /**
     * 点击登录方法
     * 验证表单后直接调用登录
     */
    onSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.login();
        } else {
          return false;
        }
      });
    },
    show(data) {
      this.$notification.open({
        message: '错误信息',
        description: data,
        style: {
          color: 'red'
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>

.login {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  background: url('../../../assets/login_bg.jpg') no-repeat center;
  background-size: 100% auto;
}
.login_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(left,#0147f8,#0130F8);
  opacity: 0.5;
}
.company {
  position: absolute;
  bottom: 40px;
  left: 0;
  z-index: 3;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.login-right {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -530px;
  margin-top: -275px;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1060px;
  height: 550px;
  border-radius: 10px;
  box-shadow: 0 3px 8px 0 rgba(0,0,0,.16);
  background-color: #fff;
  box-sizing: border-box;
}
.login-img {
  width: 350px;
  height: 350px;
  margin-right: 110px;
}
.login-img img {
  width: 100%;
  height: 100%;
}
.form-div {
  width: 427px;
  margin-right: 10px;
}
.login-input {
  width: 100%;
  font-size: 14px;
  height: 40px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s;
}
.login-input:focus {
  border-color: #005aff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 90, 255, 0.1);
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 16px;
  height: 44px;
  background: linear-gradient(135deg, #005aff 0%, #0147f8 100%);
  letter-spacing: .025em;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  margin-top: 1.5rem;
}
.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0147f8 0%, #013bd8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 90, 255, 0.3);
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.captcha {
  position: relative;
  margin-bottom: 1rem;
}
.captcha-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0.5rem;
}
.captcha-form-item {
  flex: 1;
  margin-bottom: 0 !important;
}
.captcha-form-item .ant-form-item-control {
  line-height: 1;
}
.captcha-form-item .ant-form-item-control-wrapper {
  line-height: 1;
}
.captcha-input {
  width: 100%;
  font-size: 14px;
  height: 40px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s;
}
.captcha-input:focus {
  border-color: #005aff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 90, 255, 0.1);
}
.captcha-image {
  width: 120px;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  transition: all 0.3s;
  overflow: hidden;
}
.captcha-image:hover {
  border-color: #005aff;
  background-color: #f0f5ff;
}
.captcha-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.captcha-placeholder {
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.2;
  padding: 0 8px;
}
.verification {
  position: relative;
  height: 80px;
}

/deep/ .vjs-custom-skin > .video-js .vjs-big-play-button,/deep/ .vjs-custom-skin > .video-js .vjs-control-bar {
  display: none!important;
}

.login-title {
  font-size: 34px;
  line-height: 67px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}
.login-label {
  letter-spacing: .025em;
  color: #333;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 8px;
  display: block;
}
.username, .password, .captcha {
  margin-top: 1.5rem;
}
.ant-form-item-with-help {
  margin-bottom: 1px!important;
}
.forget {
  text-align: right;
}
.forget .link {
  color: #0092FC;
}

@media screen and (max-width: 1366px) {
  .login-right {
    margin-left: -500px;
    margin-top: -250px;
    width: 1000px;
    height: 500px;
  }
  .login-img {
    width: 320px;
    height: 320px;
    margin-right: 86px;
  }
  .company {
    bottom: 20px;
  }
}
</style>
